<template>
  <!-- 
    自定义指令分为全局自定义指令和局部自定义指令
    局部自定义指令 通过在组件内设置directives属性  
    步骤: 
      - 组件内directives属性定义自定义指令函数  
      - 模板中任何元素上使用新的 v-自定义指令函数名
    语法:
      定义: 自定义指令函数(el , {value}){
        // 所有的参数都是选填
      }
      使用:  v-自定义指令函数名
  -->
  <div>
    <h3>我是APP</h3>
    <div>
      <p v-red>自定义指令test1</p>
      <p v-red>自定义指令test2</p>
      <!-- "green"这样写 green是vue变量  "'green'"是简写指令 -->
      <p v-bgColor="'#d7d7d7'">自定义指令test3</p>
      <p v-bgColor="'skyblue'">自定义指令test4</p>
    </div>
    <MyCount />
  </div>
</template>

<script>
import MyCount from '@/components/MyCount.vue'
export default {
  data() {
    return {}
  },
  components: {
    MyCount
  },
  directives: {
    // 简写的自定义指令 一个参数 定义指令时 不需要添加v-  使用的时候添加v-
    red(el) {
      // 参数 el  指令所绑定的元素 可以操作DOM
      el.style.color = 'tomato'
    },
    //简写的接收值的自定义指令 两个参数
    bgColor(el, {value}) {
      // console.log("el,binding", el, binding);
      el.style.color = value
    }
  },
  
}
</script>

<style>
</style>